<template>
	<view class="userCenter">
		<view class="header">
				<view class="title bj">
					<view class="postion">
						<view class="userLogo" @click="upload_userLogo">
							<image :src="userLogo" mode=""></image>
						</view>
						<view class="userInfo" v-if="loginState">
							<view class="line1">
								<text v-if="loginState">{{name}}</text>
								<text v-if="!loginState" @click="toLogin">去登录</text>
							</view>
							<view class="line2">
								<view class="code" v-if="loginState">
									<view>推广码：<text v-if="authTime>0">{{code}}</text><text v-if="!authTime" @click="toAuth">认证后分配</text><uni-icon v-if="!authTime" type="arrowright" size='18'></uni-icon> </view>
									<text v-if="authTime" class="copy" hover-class="uni-list-cell-hover" @click='copy'>复制</text>
								</view>
								<view class="link" @click="personalPage">
									<text>个人主页</text>
									<uni-icon type="arrowright" size='18'></uni-icon>
								</view>
							</view>
							
						</view>
						<view class="userInfo userInfo_nologin" v-if="!loginState">
							<text v-if="!loginState" @click="toLogin" class="toLogintext">登陆/注册</text>
							<view class="link" @click="toLogin">
								<view>个人主页</view>
								<uni-icon type="arrowright" size='20'></uni-icon>
							</view>
						</view>
		
					</view>
			</view>
			<view class="header_bottom">
				<view class="packet item" @click="toAllMenu">
					<text v-if="loginState">{{userSurplus}}元</text>
					<text v-if="!loginState">--</text>
					<text class="word">电子钱包</text>
				</view>
				<view class="packet item" @click="toRewardPacket">
					<text v-if="loginState">{{reward}}元</text>
					<text v-if="!loginState">--</text>
					<text class="word">奖励金</text>
				</view>
				<view class="integral item" @click="toIntegral">
					<text v-if="loginState">{{integral}}</text>
					<text v-if="!loginState">--</text>
					<text class="word">积分</text>
				</view>
			</view>
		</view>
		<view class="myinvest" @click="goMyinvest">
			<view class="title">
				<view class="left">
					<i class='iconfont '>&#xe6f3;</i><text>我的投资</text>

				</view>
				<view class="right">
					<uni-icon type="arrowright" size='20'></uni-icon>
				</view>
			</view>
			
			<view class="investItem" v-if="loginState && !nodata">
				<view class="imgWrap">
					<image :src="lastOrder.movieCoverImage" mode="aspectFill"></image>
				</view>
				<view class="investInfo">
					<view class="investInfo_nameTime">
						<view class="investInfo_title">
								<text>{{lastOrder.movieTitle}}</text>
								<text class="tag" v-if="orderStatus =='tailConfirm'">待支付尾款</text>
						</view>
						
						<text class="createTime">{{lastOrder.createTime}}</text>
					</view>
					<view class="footer">
						<text>{{lastOrder.number}}份</text>
						<text class="money">{{orderMoney}}</text>
					</view>
				</view>
			</view>
			<view class="noData" v-if="loginState && nodata">
				<i class='iconfont '>&#xe6ef;</i><text>您还没有购买过项目</text>
			</view>
			<view class="noData" v-if="!loginState">
				<i class='iconfont '>&#xe6ef;</i><text>登录后查看</text>
			</view>
			
		</view>
		<view class="myinvest recommend" @click="recommend">
					<view class="title">
						<view class="left">
							<i class='iconfont '>&#xe639;</i><text>我的推荐</text>
						</view>
						<view class="right">
							<uni-icon type="arrowright" size=20></uni-icon>
						</view>
					</view>
					<view class="investItem">
						<view class="award">
							<text v-if="loginState">{{inviteIncome}}元</text>
							<text v-if="!loginState">--</text>
							<text>累计推荐奖励</text>
							<!-- <text>好友购买我拿奖励</text> -->
						</view>
						<view class="award friends">
							<text v-if="loginState">{{inviteSum}}人</text>
							<text v-if="!loginState">--</text>
							<text>累计推荐好友</text>
							<!-- <text>直接推荐和好友推荐人数</text> -->
						</view>
					</view>
		</view>
		<view class="tool">
			<view class="title">
				<text>常用工具</text>
			</view>								
			
			<view class="toolItem">
								<view class="item" @click="recharge">
									<i class='iconfont '>&#xe6e1;</i>
									<text>钱包充值</text>
								</view>
								<view class="item" @click="withdraw">
									<i class='iconfont '>&#xe6e2;</i>
									<text>提现</text>
								</view>
								<view class="item" @click="toAllMenu">
									<i class='iconfont '>&#xe6b4;</i>
									<text>钱包明细</text>
								</view>
								<view class="item" @tap="makePhoneCall">
									<i class='iconfont '>&#xe63c;</i>
									<text>客服电话</text>
								</view>
								<view class="item" @click="about">
									<i class='iconfont '>&#xe629;</i>
									<text>关于</text>
								</view>
								<view class="item" @click="setting">
									<i class='iconfont '>&#xe713;</i>
									<text>设置</text>
								</view>
								
			</view>
		</view>
		
		<!-- <crop v-if='show'></crop> -->
			
	</view>
</template>

<script>
import uniIcon from '@/components/uni-icon.vue';
import crop from '@/components/crop.vue';
var util = require('../../common/util.js');
export default {
    data() {
        return {
            authTime: '',
            authStatus: '',
            orderStatus: '',
            show: true,
            special: false,
            userSurplus: 0,
            reward: 0,
            name: '',
            code: '',
            mobile: '',
            phoneNumber: '',
            loginState: false,
            inviteIncome: 0,
            integral: 0,
            inviteSum: 0,
            userLogo: '../../static/image/movie-acitve.png',
            title: '个人中心页',
            orderMoney: 0,
            nodata: false,
            lastOrder: {
                // 我的最新投资
                movieCoverImage: '',
                movieTitle: '',
                createTime: 0,
                number: 1,
                priceOfUnit: 0 //单价
            },
            list: []
        };
    },
    onLoad() {
        if (util.getUserToken()) {
            this.getUserInfo();
            this.loginState = true;
        } else {
            this.loginState = false;
        }
    },
    onShow() {
       if (util.getUserToken()) {
       	this.getUserInfo();
       	this.loginState = true;
       } else {
       	this.loginState = false;
       }
    },

    methods: {
        formatMoney(money) {
            return util.showDecimal(money);
        },
        formatTime(timstamp) {
            // console.log(this.lastOrder.createTime)
            return util.parseTime(timstamp);
        },
        getUserInfo() {
            uni.showLoading({
                title: '正在加载...'
            });
            util.ajax(
                'userCenter',
                {
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        console.log(json);
                        this.userSurplus = this.formatMoney(json.data.surplus);
                        this.reward = this.formatMoney(json.data.reward);
                        this.special = json.data.special;
                        if (json.lastOrder) {
                            this.nodata = false;
                            json.lastOrder.createTime = this.formatTime(json.lastOrder.createTime);
                            this.lastOrder = json.lastOrder;
                            this.orderMoney = this.formatMoney(
                                json.lastOrder.number * json.lastOrder.priceOfUnit
                            );
							this.orderStatus = json.lastOrder.orderStatus.value;
                        } else {
                            this.nodata = true;
                        }

                        this.authTime = json.data.authTime;
                        this.authStatus = json.data.authStatus.value;
                        
						
                        this.name = json.data.name;
						console.log(this.name)
                        this.mobile = json.data.mobile;
                        this.integral = json.data.score;
                        this.userLogo = json.data.avatar;
                        this.code = json.data.code;
                        this.phoneNumber = json.customServiceTel;
                        this.inviteIncome = util.showDecimal(json.invite.income);
                        this.inviteSum = json.invite.sum;
                        uni.setStorageSync('inviteUserId', json.data.inviteUserId);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    // console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        goMyinvest(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './myinvest?phone=' + this.phoneNumber
                });
            } else {
                this.toLogin();
            }
        },
        toAllMenu() {
            if (this.loginState) {
                uni.navigateTo({
                    url: '../tool/allMenu'
                });
            } else {
                this.toLogin();
            }
        },
        personalPage(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './personalPage'
                });
            } else {
                this.toLogin();
            }
        },
        toLogin() {
            uni.navigateTo({
                url: '../login/index'
            });
        },
		toAuth() {
            if(this.authStatus=='init'){
				uni.navigateTo({
					url: '../my/toCertification'
				});
			}else{
				uni.navigateTo({
					url: '../my/toCertification3'
				});
			}
        },
        upload_userLogo(e) {
            if (this.loginState) {
                uni.chooseImage({
                    count: 1,
                    success: res => {
                        var tempFilePaths = res.tempFilePaths;
                        uni.navigateTo({
                            url:
                                '../../components/crop?filePath=' +
                                tempFilePaths[0] +
                                '&type=modifyAvatar'
                        });
                    }
                });
            } else {
                this.toLogin();
            }
        },

        copy() {
            uni.setClipboardData({
                data: this.code,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'none',
                        duration: 1000
                    });
                }
            });
        },
        recommend(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './recommend?special='+this.special
                });
            } else {
                this.toLogin();
            }
        },
        recharge(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './tool/recharge'
                });
            } else {
                this.toLogin();
            }
        },
        withdraw(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './tool/withdraw'
                });
            } else {
                this.toLogin();
            }
        },
        toAllMenu(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './tool/allMenu'
                });
            } else {
                this.toLogin();
            }
        }, 
		toRewardPacket(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './tool/rewardPacket'
                });
            } else {
                this.toLogin();
            }
        },
        toIntegral(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './tool/integral'
                });
            } else {
                this.toLogin();
            }
        },
        makePhoneCall: function() {
            uni.makePhoneCall({
                phoneNumber: this.phoneNumber,
                success: () => {
                    console.log('成功拨打电话');
                }
            });
        },
        about(e) {
            uni.navigateTo({
                url: './tool/about'
            });
        },
        setting(e) {
            if (this.loginState) {
                uni.navigateTo({
                    url: './tool/setting?mobile=' + this.mobile
                });
            } else {
                this.toLogin();
            }
        }
    },
    components: {
        uniIcon,
        crop
    }
};
</script>

<style lang="less">
// @import '../../common/uni.css';
// @import '../../common/icon.css';
//
.userCenter {
    flex: 1;
    flex-direction: column;
    width: 100%;
    background: #fff;
    .header {
        flex-direction: column;
        width: 100%;
        border-bottom: 20upx solid #f8f8f8;
        height: auto;
        .title {
            position: relative;
            padding: 0 36upx;
            box-sizing: border-box;
            // width: 100%;
            height: 320upx;
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
            .postion {
                width: 94%;
                position: absolute;
                box-sizing: border-box;
                bottom: -30upx;
                align-items: center;
                .userLogo {
                    width: 150upx;
                    height: 150upx;
                    border-radius: 50%;
                    margin-right: 20upx;
                    background-color: white;
                    border: 6upx solid white;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .userInfo {
                    width: 71%;
                    flex-direction: column;
                    margin-bottom: 42upx;
                    .line1 {
                        font-size: 32upx;
                    }
                    .line2 {
                        font-size: 24upx;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 12upx;
                        .code {
							display: flex;
                            font-size: 24upx;
                            align-items: center;
							view{
								 align-items: center;
							}
							uni-icon{
								line-height: 1.15;
								display: inline-flex;
								
							}
							i{
								font-size: 20upx;
								
							}
                            .copy {
								align-items: center;
                                padding: 4upx 10upx;
                                border: 1px solid #f4f4f4;
                                border-radius: 6upx;
                                margin-left: 20upx;
                                font-size: 24upx;
                            }
                            .uni-list-cell-hover {
                                background-color: rgba(255, 18, 104, 0.81);
                            }
                        }
                        .link {
                            font-size: 26upx;
                            color: #f2f2f2;
                            justify-content: center;
                            align-items: center;
                        }
                    }
                }
                .userInfo_nologin {
                    flex-direction: row;
                    justify-content: space-between;
                    .toLogintext {
                        font-size: 32upx;
                    }
                    .link {
                        font-size: 26upx;
                        color: #f2f2f2;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }
        .header_bottom {
            padding: 50upx 36upx 30upx;
            box-sizing: border-box;
            width: 100%;
            // height: 200upx;
            font-size: 26upx;
            align-items: center;
            .item {
                width: 50%;
                justify-content: center;
                flex-direction: column;
                text:first-child {
                    color: #ff1268;
                    text-align: center;
                    font-size: 32upx;
                }
                .word {
                    font-size: 26upx;
                    color: #6666666;
                    text-align: center;
                    margin-top: 10upx;
                }
            }
        }
    }
    .myinvest {
        padding: 30upx 36upx;
        box-sizing: border-box;
        width: 100%;
        flex-direction: column;
        border-bottom: 20upx solid #f8f8f8;
        .title {
            width: 100%;
            justify-content: space-between;
            align-items: center;
            .left {
                align-items: center;
                i {
                    color: #ff1268;
                    margin-right: 10upx;
                }
                text {
                    color: #333333;
                    font-size: 30upx;
                }
            }
            .right {
                color: #999999;
            }
        }
        .noData {
            width: 100%;
            height: 170upx;
            justify-content: center;
            align-items: center;
            color: #cccccc;
            i {
                margin-right: 20upx;
            }
        }
        .investItem {
            width: 100%;
            margin-top: 50upx;
            justify-content: space-between;
            .imgWrap {
                width: 20%;
                height: 170upx;
                border-radius: 6upx;
                // margin-right: 30upx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 6upx;
                }
            }
            .investInfo {
                padding: 8upx 0;
                width: 75%;
                flex-direction: column;
                justify-content: space-between;
                .investInfo_nameTime {
                    flex-direction: column;
                    .investInfo_title {
                        text:first-child {
                            color: #222222;
                            font-size: 30upx;
                            font-weight: 600;
                        }
                        .tag {
                            line-height: 18upx;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 4upx;
                            border: 1upx solid #ff1268;
                            color: #ff1268;
                            font-size: 24upx;
                            padding: 4upx;
                            margin-left: 10upx;
                        }
                    }
                    .createTime {
                        color: #999999;
                        font-size: 26upx;
                        margin: 22upx 0 42upx;
                    }
                }
                .footer {
                    color: #333333;
                    font-size: 30upx;
                    justify-content: space-between;
                    .money {
                        color: #ff1268;
                    }
                }
            }
        }
    }
    .recommend {
        .title {
            i {
                font-size: 34upx;
            }
        }
        .investItem {
            width: 100%;
            justify-content: space-around;
            .award {
                width: 50%;
                flex-direction: column;
                align-items: center;

                text:first-child {
                    color: #ff1268;
                    font-size: 40upx;
                }
                text:nth-child(2) {
                    color: #444444;
                    font-size: 28upx;
                    margin: 26upx 0 30upx;
                }
                text:last-child {
                    color: #999999;
                    font-size: 24upx;
                }
            }
            .friends {
                width: 50%;
            }
        }
    }
    .tool {
        flex-direction: column;
        width: 100%;
        .title {
            width: 100%;
            height: 98upx;
            align-items: center;
            padding-left: 36upx;
            box-sizing: border-box;
            border-bottom: 1px solid #f8f8f8;
        }
        .toolItem {
            width: 100%;
            height: auto;
            flex-wrap: wrap;
            padding: 0 5%;
            box-sizing: border-box;
            // border: 1px solid red;

            .item {
                // padding: 30upx 0 25upx;
                flex-direction: column;
                width: 33%;
                padding: 45upx 0 30upx;
                // border: 1px solid red;

                align-items: center;

                i {
                    color: #ff1268;
                    margin-bottom: 20upx;
                }
                text {
                    color: #666666;
                    font-size: 24upx;
                }
            }
            .item:first-child {
                .iconfont {
                    font-size: 52upx;
                }
            }
            .item:nth-child(2) {
                .iconfont {
                    font-size: 52upx;
                }
            }
        }
    }
}
</style>
